<template>
  <div>
    <h1>欢迎成为车主</h1>
    <md-field>
      <md-input-item
        ref="input0"
        title="姓名"
        placeholder="填写车主的真实姓名"
      ></md-input-item>
      <md-input-item
        ref="input1"
        title="车辆品牌"
        placeholder="填写您的爱车品牌"
      ></md-input-item>
      <md-input-item
        ref="input2"
        title="车辆型号"
        placeholder="填写您的车辆型号"
      ></md-input-item>
      <md-input-item
        ref="input3"
        title="手机号码"
        type="phone"
        placeholder="填写您的手机号码"
      >
        <button ref="code" class="getcode" slot="right" @click="getcode">获取验证码</button>
      </md-input-item>
      <md-input-item
        ref="input4"
        title="验证码"
        placeholder="填写手机收到的验证码"
      ></md-input-item>
    </md-field>

    <md-button style="margin-top:30px">提交申请</md-button>
  </div>
</template>

<script>
export default {
  name: 'reg',
  data () {
    return {

    }
  },
  methods: {
    getcode () {
      let ing = this.$refs.code.classList.contains('ing')
      if (!ing) {
        this.$refs.code.classList.add('ing')
        this.$refs.code.innerText = 60
        window.ctcode = setInterval(() => {
          if (this.$refs.code.innerText === '0') {
            clearInterval(window.ctcode)
            this.$refs.code.classList.remove('ing')
            this.$refs.code.innerText = '重新获取'
            return false
          }
          this.$refs.code.innerText = this.$refs.code.innerText - 1
        }, 1000)
      }
    }
  }

}
</script>

<style scoped>
.getcode{
  width: 70px;
  line-height: 30px;
  position: absolute;
  right:0;
  font-size: 12px;
  border: 1px solid #ff4500;
  background: #fff;
  border-radius: 3px;
  color:#ff4500
}
  h1{
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
  }
</style>
